
// 获取商品id

function getId() {
    let str = location.href
    let id = str.split("?")[1]
    //获取商品详情数据
    $.ajax({
        method: "get",
        url: "http://www.xiongmaoyouxuan.com/api/detail",
        data: {
            id
        },
        success: res => {
            if (res.code == 200) {
                cartShow(res.data)
            }
        },
        error: res => {
            alert("网络错误" + res.status)
        }
    })
}
getId()

//详情页面渲染
function cartShow(data) {
    let str1 = data.detail.photo.map(item => {
        return `<li><img src="${item.url}"></li>`
    }).join("");
    let str = `
    <!-- 放大镜 -->
    <div class="detailsleft">
    <div class="topbox">
    <ul>
    ${str1}
    </ul>
    <div class="glass"></div>
    </div>
    <div class="buttombox">
    <ol>
    ${str1}
    </ol>
    </div>
</div>

<div class="detailsright">
<!-- 放大镜放大部分 -->
<div class="bigGlass">
<ul>
${str1}
</ul>
</div>
<!-- 商品详细信息 -->
<div class="moredetail">

<!-- 商品介绍-->
<div class="moredetailboxtop">
<span>包邮</span>
<p>${data.detail.title}</p>
</div>

<!-- 商品价格-->
<div class="moredetailpricebox">
<p>原价￥${data.detail.originPrice}</p>

<p>
<span>劵后价:￥</span>
<span>${data.detail.price}</span>
<span>${data.detail.couponValue==""?"无优惠":data.detail.couponValue}</span>
<span>${data.detail.saleNum}人已买</span>
</p>
</div>

<!-- 点购-->
<div class="moredetailboxbuttom">
<p>优惠卷有效期:${data.detail.expireDate==null?"无":data.detail.expireDate}</p>
<button>加入购物车</button>
</div>

</div>
</div>`
    //渲染到页面上
    $("#details").html(str);
    //给放大镜各部分第一张照片添加样式
    $(".topbox>ul>li")[0].classList.add("active1");
    $(".buttombox>ol>li")[0].classList.add("on");
    $(".bigGlass>ul>li")[0].classList.add("active1")
    bigGlass()
    getCart(data)
}

/**
 * 放大镜事件
 */
function bigGlass() {
    //鼠标移入显示放大镜
    $(".topbox").on("mouseover", () => {
        //小放大镜出现
        $(".glass").css("display", "block");
        //大放大镜出现
        $(".bigGlass").css("display", "block");

    })
    // 鼠标移出放大镜消失
    $(".topbox").on("mouseout", () => {
        //小放大镜消失
        $(".glass").css("display", "none");
        //大放大镜消失
        $(".bigGlass").css("display", "none");
    })
    //放大镜跟随鼠标事件
    $(".topbox").on("mousemove", e => {
        //获取鼠标坐标
        let X = e.offsetX - $(".glass").width() / 2;
        let Y = e.offsetY - $(".glass").height() / 2;
        // 判断边界
        if (X < 0) X = 0;
        if (Y < 0) Y = 0
        if (X > $(".topbox").width() - $(".glass").width()) X = $(".topbox").width() - $(".glass").width()
        if (Y > $(".topbox").height() - $(".glass").height()) Y = $(".topbox").height() - $(".glass").height()
        //将鼠标坐标绑定在放大镜中心
        $(".glass").css({ top: Y, left: X })

        //让大放大镜的图片跟着移动
        let bgX = $(".bigGlass").width() / $(".glass").width() * X;
        let bgY = $(".bigGlass").height() / $(".glass").height() * Y;
        $(".active1>img").css({ left: -bgX, top: -bgY });
    })
    //放大镜选项卡部分
    $(".buttombox>ol").on("click", "li", function () {
        //移除类名
        $(".topbox>ul>li").removeClass();
        $(".buttombox>ol>li").removeClass();
        $(".bigGlass>ul>li").removeClass();
        // 添加类名
        $(this).addClass("on");
        $(".topbox>ul>li").eq($(this).index()).addClass("active1")
        $(".bigGlass>ul>li").eq($(this).index()).addClass("active1")
    })
}

/**
 * 加入购物车
 */
function getCart(data) {
    $(".moredetailboxbuttom>button").on("click", e => {
        //阻止默认点击事件触发
        e.preventDefault();
        //当前商品信息
        let product = {
            url: data.share.imageUrl,
            title: data.share.title,
            state: false,
            num: 1,
            price: data.detail.price,
            allprice: data.detail.price,
            id:data.detail.id
        }
        //获取本地数据,并将商品信息加入
        let myCartlist = JSON.parse(localStorage.getItem("myCartlist")) || [];
        //判断商品是否存在
        let type = myCartlist.find(item => {
            return item.title == product.title;
        })
        
        if (type==undefined) {
            myCartlist.push(product);
        }else{
            type.num++;
            type.allprice+=type.price;
        }
        //上传信息
        localStorage.setItem("myCartlist", JSON.stringify(myCartlist));
        alert("商品加入成功!")
        //跳转页面
        location.href = "../cartList.html"
    })
}